<%@page import="com.wanmait.movies.vo.Collect"%>
<%@page import="com.wanmait.movies.vo.Discuss"%>
<%@page import="com.wanmait.movies.vo.Concerned"%>
<%@page import="java.util.ArrayList"%>
<%@page import="com.wanmait.movies.vo.Pager"%>
<%@page import="com.wanmait.movies.vo.User"%>
<%@page import="sun.swing.UIAction"%>
<%@page import="com.wanmait.movies.vo.Movie"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<% User uzi = (User)request.getAttribute("uzi");%>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(function(){
    $("#movie_collect,#my_concern,#my_comment,#my_commenty").click(function(){
        $("#movie_collect,#my_concern,#my_comment,#my_commenty,#my_commenty").css("font-weight","500");
        $("#movie_collect,#my_concern,#my_comment,#my_commenty,#my_commenty").css("font-size","16px");
        $("#collect_list,#concern_list,#comment_list,#recomment_list").css("display","none");
        $(this).css("font-size","20px");
        $(this).css("font-weight","600");
    });
    
    $("#my_concern").click(function(){
        $("#concern_list").css("display","block");
        
    });
    $("#movie_collect").click(function(){
        $("#collect_list").css("display","block");
        
    });
    $("#my_comment").click(function(){
        $("#comment_list").css("display","block");
        
    });
    $("#my_commenty").click(function(){
        $("#recomment_list").css("display","block");
        
    });
    $(".collectpager").click(function(){
    	$.ajax({
    		url:"/movies/TaRenServlet",
    		type:"get",
    		data:{action:"userCollectAjax",userId:<%=uzi.getId()%>, currentPager:$(this).html()},
    		success:function(mes){
    			
    			$("#collect_list_ul").children().remove();
    			$("#collect_list_ul").html(mes);
    		}
    	});
    })
    $(".concernpager").click(function(){
    	$.ajax({
    		url:"/movies/TaRenServlet",
    		type:"get",
    		data:{action:"userConcernAjax",userId:<%=uzi.getId()%>,currentPager:$(this).html()},
    		success:function(mes){
    			
    			$("#concern_list_ul").children().remove();
    			$("#concern_list_ul").html(mes);
    		}
    	});
    })
    $(".recommentpager").click(function(){
    	$.ajax({
    		url:"/movies/TaRenServlet",
    		type:"get",
    		data:{action:"userRecommentAjax",userId:<%=uzi.getId()%>, currentPager:$(this).html()},
    		success:function(mes){
    			
    			$("#recomment_list_ul").children().remove();
    			$("#recomment_list_ul").html(mes);
    		}
    	});
    })
    $(".commentpager").click(function(){
    	$.ajax({
    		url:"/movies/TaRenServlet",
    		type:"get",
    		
    		data:{action:"userCommentAjax",userId:<%=uzi.getId()%>, currentPager:$(this).html()},
    		success:function(mes){
    			
    			$("#comment_list_ul").children().remove();
    			$("#comment_list_ul").html(mes);
    		}
    	});
    })
})

//关注和取消关注
$(function(){
	$("#top").on("click",".concerned",function(){
		
		var htmls = $(".concerned").html();
		var uid = $(".concerned").attr("uid");
		$.ajax({
    		url:"/movies/TaRenServlet?action=concernedUser",
    		type:"get",
    		async:false,
    		data:"html="+htmls+"&uid="+uid,
    		success:function(mes){
    			if(mes=="0"){
    				$(".concerned").html("取消关注");
    				$(".concerned").css("background-color","gray");
    			}
    			if(mes=="1"){
    				$(".concerned").html("关注");
    				$(".concerned").css("background-color","red");
    			}
    	
    		}
    	});
		
	});
});

</script>
<style>
    body{
        background: #f5f5f5;
    }
    #homepage{
        margin: 70px auto;
        width: 900px;    
        height: 1000px;
        border-radius: 5px; 
    }
    #homepage #top{
        width: 100%;
        height: 250px;
        background: white;
        border-radius: 5px;
        box-shadow: 0px 0px 5px rgba(0,0,0,0.1);
    }
    #homepage #top #back{
        width: 100%;
        height: 160px;
        border-top-right-radius: 5px;
        border-top-left-radius: 5px;
        background-image: url(/movies/images/homepage.jpg);
        background-size:cover;
    }
    #homepage #top span{
        font-size: 30px;
        font-weight: 550;
    }
    #homepage #top #person_info{
        margin-left: 520px; 
        font-size: 15px; 
    }
    #homepage #mid{
        margin-top: 10px;
        width: 100%;
        border-radius: 5px;
        background: white;
        box-shadow: 0px 0px 5px rgba(0,0,0,0.1);
    }
    #homepage #profile_photo{
        float: left;
        width: 250px;
        height: 250px;     
    }
    #homepage #profile_photo img{
        position: absolute;
        width: 150px;
        height: 150px;
        border: 10px solid white;
        border-radius: 10px;
        margin-top: 40px;
        margin-left: 40px;
        
    }
    #homepage #subfield{
        height: 40px;  
        text-align: center;
    }
    #homepage #mid ul{
        list-style: none;
    }
    #homepage #subfield ul li{
        margin-left: 0px;
        width: 150px; 
        float: left;
        line-height: 45px;
    }
    #homepage #subfield ul li a{
        text-decoration: none; 
        color: black;
    }
    #homepage #mid hr{
        border: #f5f5f5 1px solid;
        border-bottom: none;  
        
    }
    #homepage #movie_collect{
    	font-size:20px; 
        font-weight:600;
    }
    #homepage #mid #collect_list{
        width: 99%;
        border-radius: 5px;
    }
    #homepage #mid #concern_list{
        width: 99%;
        border-radius: 5px ;
        display: none;
    }
    #homepage #mid #comment_list{
        width: 99%;
        border-radius: 5px;
        display: none;
    }
    #homepage #mid #recomment_list{
        width: 99%;
        border-radius: 5px;
        display: none;
    }
    #homepage #mid #comment_list li{ 
         
        width: 800px;
        height: 125px;
        border-bottom: 1px solid #f5f5f5
    }
    #homepage #mid #recomment_list li{ 
         
        width: 800px;
        height: 125px;
        border-bottom: 1px solid #f5f5f5
    }
    
    
    #homepage #mid #concern_list li{ 
        line-height: 125px;
        width: 800px;
        height: 125px;
        border-bottom: 1px solid #f5f5f5
    }
    #homepage #mid #collect_list li{ 
        line-height: 125px;
        width: 800px;
        height: 125px;
        border-bottom: 1px solid #f5f5f5
    }
    #homepage #mid #collect_list li img {
    	width: 70px;
    	height: 110px;
    	vertical-align: middle;
    }  
    #homepage #mid #comment_list li img {
    	width: 40px;
    	height: 40px;
    	vertical-align: middle;
    }  
    #homepage #mid .collect_pager,.concern_pager,.comment_pager,.recomment_pager{
        text-align: center;
        padding-bottom: 25px;
    }
    #homepage #mid #concern_list li img {
    	width: 70px;
    	height: 70px;
    	vertical-align: middle;
    }  
    #homepage #mid #recomment_list li img {
    	width: 70px;
    	height: 70px;
    	vertical-align: middle;
    }  

</style>
</head>
<body>
	<jsp:include page="/include/head.jsp"></jsp:include>
	
	 <div id="homepage">
            <div id="top">
                <div id="profile_photo">
                    <img src=" <%=request.getContextPath()%>/images/<%=uzi.getUserFaceimage()%> ">
                </div>
                <div id="back"></div>
                <span><%=uzi.getUserName()%></span>
                <%
                Concerned  con= (Concerned)request.getAttribute("concerned");
                if(con==null){ %>
                <span class="concerned" uid="<%=uzi.getId() %>" style="background-color: red;font-size:15px;color:white;">关注</span>
               <% }
                
                if(con!=null){%>
                <span class="concerned"  uid="<%=uzi.getId() %>" style="background-color: gray;font-size:15px;color:white;">取消关注</span>
               <% }
                %>
               
                <br><br>
                
            </div>
            <div id="mid">
                <div id="subfield">
                    <ul>
                        <li><a href="javascript:" id="movie_collect">电影收藏</a></li>
                        <li><a href="javascript:" id="my_concern">他的关注</a></li>
                        
                    </ul>
                </div>
                <hr>
                <div id="collect_list">
                    <ul id="collect_list_ul">
                    <%
                    	ArrayList<Collect>  collects = (ArrayList<Collect>)request.getAttribute("usercollects");
                    	if(collects == null){
                    		%>
                    		<li class="collect_list_li">
                    		</li>
                    		<%
                    	}else{
                    	for(Collect m:collects){
                    %>
                    		<li class="collect_list_li">
                           		<img src="/movies/images/<%=m.getMovieId().getMovieImage() %>">
                           		<a><%=m.getMovieId().getMovieName() %></a>
                           		<a>上映时间：<%=m.getMovieId().getMovieShowtime() %></a>
                        	</li>
                    <%
                    	}}
                    %>
                    </ul>
               <div class="collect_pager"> 
                    	<%
                    	Pager p = (Pager)request.getAttribute("pagerofcollect");
                    	for(int i = 1; i <= p.getCountinPager(); i++){
                    		%>
                    		[<a href="javascript:" class="collectpager"><%=i %></a>]
                    		<%
                    		
                    	}  
                         %>
                </div>
               </div>  
                    
                <div id="concern_list">
                    <ul id="concern_list_ul">
                         <%
                        ArrayList<Concerned> concerns = (ArrayList<Concerned>)request.getAttribute("userconcerns");
                        if(concerns == null){
                     		%>
                     		<li class="concern_list_li">
                     		</li>
                     		<%
                        }else{	
                    	for(Concerned c : concerns){
                    %>
                    		<li class="concern_list_li">
                           		<img src="/movies/images/<%=c.getUserId().getUserFaceimage()%>">
                           		<a href="/movies/TaRenServlet?action=userPage&uzi=<%=c.getUserId().getId()%>"><%=c.getUserId().getUserName() %></a>
                        	</li>
                    <%
                    	}}
                    %>
                       
                         
                    </ul> 
                        <div class="concern_pager">
                        <%
                    	Pager p1 = (Pager)request.getAttribute("pagerofconcern");
                    	for(int i = 1; i <= p.getCountinPager(); i++){
                    		%>
                    		[<a href="javascript:" class="concernpager"><%=i %></a>]
                    		<%
                    		
                    	}  
                         %>
                        </div>
                </div>
                <div id="comment_list">
                    <ul id="comment_list_ul">
                        
                       <%
                        ArrayList<Discuss> discusses = (ArrayList<Discuss>)request.getAttribute("usercomments");
                        if(discusses == null){
                     		%>
                     		<li class="comment_list_li">
                        
                        	</li>
                     		<%
                        }else{	
                    	for(Discuss d : discusses){
                    %>
                    		<li class="comment_list_li">
                    			<span><%=d.getMovieDiscuss() %></span><br>
                           		<img src="/movies/images/<%=d.getMovieId().getMovieImage()%>">
                           		<a><%=d.getMovieId().getMovieName()%></a>
                        	</li>
                    <%
                    	}}
                    %>  
                    </ul>
                        <div class="comment_pager">
                        <% 
                    	Pager p2 = (Pager)request.getAttribute("pagerofcomment");
                    	for(int i = 1; i <= p2.getCountinPager(); i++){
                    		  %>
                    		 [<a href="javascript:" class="commentpager"><%=i %></a>] 
                    		<% 
                    		
                    	}  
                          %>
                        </div> 
                </div>
                
                
                <div id="recomment_list">
                    <ul id="recomment_list_ul">
                        
                       <%
                        ArrayList<Discuss> rediscusses = (ArrayList<Discuss>)request.getAttribute("userrecomments");
                        if(rediscusses == null){
                     		%>
                     		<li class="recomment_list_li">
                        
                        	</li>
                     		<%
                        }else{	
                    	for(Discuss d : rediscusses){
                    %>
                    		<li class="recomment_list_li">
                    			<span>我：<%=d.getMovieDiscuss() %></span><br>
                           		<img src="/movies/images/<%=d.getMovieId().getMovieImage()%>">
                    			<a><%=d.getUserId().getUserName() %></a>评论了我：
                    			<span><%=d.getReDiscuss() %></span><br>
                    			<span><%=d.getDiscussTime() %></span>
                    			
                        	</li>
                    <%
                    	}}
                    %>  
                    </ul>
                        <div class="recomment_pager">
                        <% 
                    	Pager p3 = (Pager)request.getAttribute("pagerofrecomment");
                    	for(int i = 1; i <= p3.getCountinPager(); i++){
                    		  %>
                    		 [<a href="javascript:" class="recommentpager"><%=i %></a>] 
                    		<% 
                    		
                    	}  
                          %>
                        </div> 
                </div>
                 
            </div>
             
        </div>
</body>
</html>